<template>
    <div class="app-container">
        <el-row>
            <el-col :span="20">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="listQuery" class="demo-form-inline" @keyup.native.enter="getDataList">
                        <el-form-item label="接口名称">
                            <el-input v-model="listQuery.interface_name" placeholder="接口名称" autosize clearable />
                        </el-form-item>
                        <el-form-item label="接口编码">
                            <el-input v-model="listQuery.interface_code" placeholder="接口编码" autosize clearable />
                        </el-form-item>
                        <el-form-item label="平台名称">
                            <el-select id="" v-model="listQuery.platform_name" @change="selectChange" placeholder="平台名称" clearable filterable
                                default-first-option>
                                <el-option v-for="item in platform_name_list" :key="item.platform_id"
                                    :label="item.platform_name" :value="item.platform_name" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="模块名称">
                            <el-select id="" v-model="listQuery.module_name" @change="selectChange" placeholder="模块名称" clearable filterable
                                default-first-option>
                                <el-option v-for="item in module_name_list" :key="item.module_id"
                                    :label="item.module_name" :value="item.module_name" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报表名称">
                            <el-select id="" v-model="listQuery.report_name" @change="selectChange" placeholder="报表名称" clearable filterable
                                default-first-option>
                                <el-option v-for="item in report_name_list" :key="item.report_id"
                                    :label="item.report_name" :value="item.report_name" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <el-button type="text" @click="getDataList()">查询</el-button>
                    <el-button type="text" @click="updateList()">同步接口列表</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="table">
            <el-table v-loading="listLoading" :data="list" border highlight-current-row style="width: 100%">

                <el-table-column align="center" v-for="item in columns" :key="item.id" :label="item.label" :show-overflow-tooltip="true">
                    <template slot-scope="{row}">
                        <span>{{ row[item.name] }}</span>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="300" inline>
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleDetail(scope.row)" >详细信息</el-button>
                        <el-button type="text" size="small" @click="handleView(scope.row)" >查看数据</el-button>
                        <el-button type="text" size="small" @click="updateItem(scope.row.id)">同步字段</el-button>
                        <el-button type="text" size="small" @click="deleteItem(scope.row.id)">删除接口</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getDataList"/>
    </div>
</template>

<script>
import { getInterfaceList, getPlatformModuleReportList, getOriginalInterfaceList, deleteInterface} from '@/api/report'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
    name: 'InterfaceList',
    components: { Pagination },
    data() {
        return {
            columns: [
            {name:'id',label:'接口ID'},
            {name:'interface_code',label:'接口编码'},
            {name:'interface_name',label:'接口名称'},
            {name:'platform_name',label:'平台名称'},
            {name:'module_name',label:'模块名称'},
            {name:'report_name',label:'报告名称'},
            {name:'interface_db_type',label:'数据库类型'},
            {name:'interface_db_name',label:'数据库名称'},
            {name:'is_paging',label:'是否分页'},
            {name:'is_date_option',label:'是否日期条件'},
            {name:'is_total',label:'是否合计'},
            {name:'is_second_table',label:'是否副表'},
            {name:'is_login_visit',label:'是否登录访问'},
            {name:'alarm_type',label:'告警类型'},
            {name:'interface_desc',label:'接口描述'},
            {name:'user_name',label:'创建人'}
            ]
            ,
            list: null,
            total: 0,
            listLoading: false,
            updateLoading: false,
            platform_name_list: [],
            module_name_list: [],
            report_name_list: [],
            listQuery: {
                page: 1,
                limit: 10,
                interface_code: '',
                interface_name: '',
                platform_name: '',
                module_name: '',
                report_name: ''
            },
            platformModuleReportList:[]
        }
    },
    mounted() {
        this.selectChange()
        this.getDataList()
    },
    methods: {
        selectChange() {
            getPlatformModuleReportList(this.listQuery).then(response => {
                this.platformModuleReportList = response.data
                this.platform_name_list = this.platformModuleReportList.map(item => { return { 'platform_id': item.platform_id, 'platform_name': item.platform_name } })
                this.module_name_list = this.platformModuleReportList.map(item => { return { 'module_id': item.module_id, 'module_name': item.module_name } })
                this.report_name_list = this.platformModuleReportList.map(item => { return { 'report_id': item.report_id, 'report_name': item.report_name } })
        
            this.platform_name_list = this.platformModuleReportList.map(item => { return { 'platform_id': item.platform_id, 'platform_name': item.platform_name } })
            this.module_name_list = this.platformModuleReportList.map(item => { return { 'module_id': item.module_id, 'module_name': item.module_name } })
            this.report_name_list = this.platformModuleReportList.map(item => { return { 'report_id': item.report_id, 'report_name': item.report_name } })
            this.platform_name_list = this.platform_name_list.filter((item, index, self) => {
            return index === self.findIndex((t) => 
            t.platform_id === item.platform_id && t.platform_name === item.platform_name
            );
            });
            this.module_name_list = this.module_name_list.filter((item, index, self) => {
            return index === self.findIndex((t) => 
            t.module_id === item.module_id && t.module_name === item.module_name
            );
            });
            this.report_name_list = this.report_name_list.filter((item, index, self) => {
            return index === self.findIndex((t) => 
            t.report_id === item.report_id && t.report_name === item.report_name
            );
            });
        })
        },
        getDataList() {
            this.listLoading = true
            getInterfaceList(this.listQuery).then(response => {
                this.list = response.data.data
                this.total = response.data.total
                this.listLoading = false
            })
        },
        updateList() {
            this.listLoading = true
            getOriginalInterfaceList({update_type:'1'}).then(response => {
                this.$message(response.msg)
                this.getDataList()
                this.listLoading = false
            })

        },
        updateItem(interface_ids){
            getOriginalInterfaceList({interface_ids, update_type:'2'}).then(response => {
                this.$message(response.msg)
            })
        },
        deleteItem(interface_id) {
            deleteInterface({ interface_id }).then(response => {
                this.$message(response.msg)
                this.getDataList()
                }
            )
        },
        handleView(item) {
            this.$router.push({ path: '/report/interface/view/' + item.id, query: { name: item.interface_name , code: item.interface_code} })
        },
        handleDetail(item) {
            this.$router.push({ path: '/report/interface/detail/' + item.id, query: { name: item.interface_name } })
        }
    }
}
</script>

<style scoped>
.edit-input {
    padding-right: 100px;
}

.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}
</style>